<!--播放音乐-->
<template>
  <div class="playMusic">
    <music-title :headerSetting="headerSetting">
      <!-- header_left就插槽名，不用默认就用slot -->
      <div slot="header_left" class="header_ico">
        <img class="goBackIcon" :src="goBackIcon" alt="" />
      </div>
      <!-- header_right就插槽名，不用默认就用slot -->
      <div
        slot="header_right"
        class="header_ico shareIcon"
        @click="headerClickCallBack"
      >
        <img :src="shareIcon" alt="" />
      </div>
      <div slot="header_right" class="header_ico audioIcon">
        <!-- <img :src="audioIcon" v-show="isPlay" alt="" @click="pause" />
        <img :src="audioIconx" v-show="!isPlay" alt="" @click="play" /> -->
        <music-cmp
          ref="answerAudio"
          :detail="detail"
          :isPlay="isPlay"
          @mediaControl="mediaControl"
        ></music-cmp>
      </div>
    </music-title>
    <share-img
      :isShareImg="isShareImg"
      @shareDialog="shareDialog"
      ref="shareImg"
      :type="1"
      :shareData="shareData"
      :dataConfig="dataConfig"
    ></share-img>
  </div>
</template>
<script>
export default {
  data() {
    return {
      goBackIcon: require("@/assets/imgs/goback.png"),
      shareIcon: require("@/assets/imgs/share.png"),
      audioIcon: require("@/assets/imgs/audio.png"),
      audioIconx: require("@/assets/imgs/audiox.png"),
      isPlay: false, // 是否播放
      // 音乐开关
      detail: {
        audioOpenImageId: require("@/assets/imgs/audio.png"),
        audioCloseImageId: require("@/assets/imgs/audiox.png"),
        topColor: "#ddd",
      },
      // 头部浮层
      headerSetting: {
        backgroundColor: "transparent",
      },
      //是否分享图片二维码
      isShareImg: false,
      //分享的背景图
      shareData: [],
      dataConfig: {},
    };
  },
  created() {
    this.getData();
  },
  components: {
    musicTitle: (resolve) => require(["@/components/musicTitle"], resolve),
    musicCmp: (resolve) => require(["@/components/musicCmp"], resolve),
    shareImg: (resolve) => require(["@/components/imgShare"], resolve),
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener("scroll", this.handleScroll);
    });
  },
  methods: {
    mediaControl(val) {
      this.isPlay = val;
    }, //页面滚动
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //   this.isFixed = scrollTop > 50 ? true : false;
      this.isFixed = scrollTop > 10 ? true : false;
      if (scrollTop > 10) {
        this.showTop = true;
      } else {
        this.showTop = false;
      }

      if (this.isFixed) {
        if (this.detail && this.detail.topColor) {
          this.headerSetting.backgroundColor = this.detail.topColor;
        }
      } else {
        this.headerSetting.backgroundColor = "transparent";
      }
    },
    // 分享
    shareDialog(val) {
      this.isShareImg = val;
    },
    // 分享函数
    headerClickCallBack() {
      window.scrollTo(0, 0);
      this.isShareImg = true;
    },
    // 初始数据
    getData() {
      this.shareData = [
        {
          bgUrl:
            "https://file.chtfund.com.cn/group2/M00/00/87/rBDFX2FBoduAaiH2AAKGAD2d1zY170.png",
        },
      ];
      this.dataConfig.periodsName = "盛世庆华诞  天天砸金蛋";
      this.dataConfig.titleName = "砸金蛋活动";
      this.dataConfig.actName = "lotteryAct";
    },
  },
};
</script>
<style scoped lang="less">
.playMusic {
  // background: rgb(73, 244, 250);
  height: 100vh;
  width: 100%;
}
.header_ico {
  width: 0.64rem;

  img {
    width: 100%;
  }
}
.audioIcon {
  margin-left: 0.3rem;
}
</style>
